T<template>
  <div>
    <div class="tab-bar">
      <div v-for="(item, index) in tabItems" :key="index">
        <router-link :to="item.path">
          <div
            class="tab-item"
            :class="{ active: $route.path.includes(item.path) }"
          >
            <i class="iconfont" :class="item.icon"></i>
            <span>{{ item.title }}</span>
          </div>
        </router-link>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Tab-Bar",
  data() {
    return {
      currentIndex: 0,
      tabItems: [
        {
          id: 0,
          icon: "icon-shouye",
          title: "首页",
          path: "/home",
        },
        {
          id: 1,
          icon: "icon-icon04",
          title: "分类",
          path: "/list",
        },
        {
          id: 2,
          icon: "icon-gouwuche",
          title: "购物车",
          path: "/cart",
        },
        {
          id: 3,
          icon: "icon-wode",
          title: "我的",
          path: "/my",
        },
      ],
    };
  },
  components: {},
  methods: {},
  created() {},
  mounted() {},
};
</script>

<style scoped lang='scss'>
.tab-bar {
  display: flex;
  position: fixed;
  justify-content: space-around;
  background-color: #fff;
  z-index: 999;
  width: 100%;
  bottom: 0;
  border-top: 1px solid #666;

  .tab-item {
    display: flex;
    flex-direction: column;
    text-align: center;
    color: #000;
    padding-bottom: 0.266667rem;
    i {
      font-size: 0.586667rem;
      margin: 0.08rem 0;
    }

    span {
      font-size: 0.373333rem;
    }
  }
}
.active {
  color: #ff6d07 !important;
}
</style>